<style lang="less">
@import "../styles/menu.less";
</style>

<template>
  <div>
    <template v-for="item in menuList">
      <MenuItem
        v-if="item.children==null||item.children.length<=0"
        :name="item.name"
        :key="item.name"
      >
        <!-- <i class="iconfont" v-html="item.icon"></i> -->
        <Icon :type="item.icon" />
        <!-- <Icon type="ios-checkmark" /> -->
        <span>{{ itemTitle(item) }}</span>
      </MenuItem>
      <Submenu v-else :name="item.name" :key="item.name">
        <template slot="title">
          <!-- <i class="iconfont" v-html="item.icon"></i> -->

          <Icon :type="item.icon" />
          <!-- <Icon type="ios-checkmark" /> -->
          <span>{{ itemTitle(item) }}</span>
        </template>
        <template v-for="child in item.children">
          <template v-if="child.children!=null&&child.children.length>0">
            <multilevelMenu :key="child.name+child.url" :menu-list="ToArry(child)"></multilevelMenu>
          </template>
          <MenuItem v-else :name="child.name" :key="child.name">
            <!-- <i class="iconfont" v-html="child.icon"></i> -->
            <Icon :type="child.icon" />
            <!-- <Icon type="ios-checkmark" /> -->
            <span>{{ L(child.meta.title) }}</span>
          </MenuItem>
        </template>
      </Submenu>
    </template>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Emit } from "vue-property-decorator";
import AbpBase from "../../../lib/abpbase";
@Component({})
export default class MultilevelMenu extends AbpBase {
  name: string = "multilevelMenu";
  @Prop({ type: Array }) menuList: Array<any>;
  @Prop({ type: Number }) iconSize: number;
  @Prop({ type: String, default: "dark" }) menuTheme: string;
  @Prop({ type: Array }) openNames: Array<string>;
  itemTitle(item: any): string {
    return this.L(item.meta.title);
  }
  @Emit("on-change")
  changeMenu(active: string) {}
  updated() {
    this.$nextTick(() => {
      if (this.$refs.sideMenu) {
        (this.$refs.sideMenu as any).updateActiveName();
      }
    });
  }
  ToArry(obj) {
    let ar = [];
    ar.push(obj);
    return ar;
  }
}
</script>
